<template>
  <div class="pie" :id="id"></div>
</template>

<script>
import * as echarts from 'echarts';
import json from './theme';
import { AESKey } from '@/utils/utils';
// import moment from 'moment';

export default {
  name: 'Bar',
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          {
            name: '测试'
          },
          {
            name: '测试2'
          }
        ];
      }
    },
    nowTime: {
      type: Object,
      default: () => {
        return {
          label: '',
          pre: ''
        };
      }
    }
  },
  data() {
    return {
      chartDom: null,
      myChart: null,
      id: ''
    };
  },
  watch: {
    data: {
      handler(val) {
        const s = setTimeout(() => {
          this.init();
          clearTimeout(s);
        }, 20);
      },
      immediate: true
    }
  },
  mounted() {
    this.id = AESKey();
  },
  methods: {
    init() {
      const nowYear = this.nowTime.label;
      const preYear = this.nowTime.pre;
      // const length = this.data.filter(e => e.address).length;

      console.log('[this.data]', this.data);

      this.$nextTick(() => {
        if (!this.myChart) {
          this.chartDom = document.getElementById(this.id);
          echarts.registerTheme('dark', json);
          this.myChart = echarts.init(this.chartDom, 'dark');
        }

        const myChart = this.myChart;

        const option = {
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: this.data.filter(e => e.address).map(e => e.address),
            axisLabel: {
              interval: 0,
              rotate: 45
              // nameTextStyle: {

              // },
              // formatter: function(params) {
              //   let newParamsName = '';
              //   const paramsNameNumber = params.length;
              //   const provideNumber = length <= 8 ? 3 : 2;
              //   const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              //   if (paramsNameNumber > provideNumber) {
              //     for (let p = 0; p < rowNumber; p++) {
              //       let tempStr = '';
              //       const start = p * provideNumber;
              //       const end = start + provideNumber;
              //       if (p === rowNumber - 1) {
              //         tempStr = params.substring(start, paramsNameNumber);
              //       } else {
              //         if (p > 2) {
              //           tempStr = '...';
              //           newParamsName += tempStr;
              //           break;
              //         } else {
              //           tempStr = params.substring(start, end);
              //           if (p < 2) {
              //             tempStr += '\n';
              //           }
              //         }
              //       }
              //       newParamsName += tempStr;
              //     }
              //   } else {
              //     newParamsName = params;
              //   }
              //   return newParamsName;
              // }
            }
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          grid: {
            top: '15%',
            bottom: '24%'
          },
          legend: {
            data: [nowYear, preYear],
            align: 'left',
            left: 30,
            top: 0,
            textStyle: {
              color: '#fff'
            },
            itemWidth: 15,
            itemHeight: 11,
            itemGap: 12,
            formatter: function(name) {
              if (!name) return '';
              return name.includes('全年') ? name.replace('全年', '年') : name.split('年')[0] + '年';
            }
          },
          series: [
            {
              name: nowYear,
              data: this.data.filter(e => e.address).map(e => Number(e.thisYear)),
              type: 'bar',
              barMaxWidth: 30,
              barMinHeight: 5,
              itemStyle: {
                // borderRadius: [10, 10, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: '#2AE8EE' // 0% 处的颜色
                    },
                    {
                      offset: 0.7, color: 'rgba(42, 232, 238, 0.7)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(42, 232, 238, 0.1)' // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: preYear,
              data: this.data.filter(e => e.address).map(e => Number(e.lastYear)),
              type: 'bar',
              barMaxWidth: 30,
              barMinHeight: 5,
              itemStyle: {
                // borderRadius: [10, 10, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: 'rgba(255,103,108, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 0.7, color: 'rgba(255,103,108, 0.7)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(255,103,108, 0.1)' // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      });
    }
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
